<template>
  <div class="router-box">
    <div @click="OnMoveLeft" id="left-btn">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div>
      <div id="router-list" class="swiper-container">
        <div class="swiper-wrapper" ref="swiper-wrapper">
          <div v-for="(item,index) in navMenuList" :key="index" :class="['swiper-slide',navRouterIndex==index ? 'cur' : '']">
            <span class="vertical-middle">{{ item.name }}</span>
            <span v-if="index != 0" class="vertical-middle">
              &nbsp;
              <i class="el-icon-circle-close vertical-middle"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div>
      <ul>
        <li id="right-btn" @click="OnMoveRight" style="border-right:1px solid #eee;border-left:1px solid #eee;font-size:20px;">
          <i class="el-icon-arrow-right"></i>
        </li>
        <li style="" @click="CloseAllNav">
          <span class="vertical-middle">关闭全部</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex"; 
export default {
  computed: {
    ...mapState(["navMenuList", "navRouterIndex", "menuArray"])
  },
  data() {
    return {
      routerSwiper: null
    };
  },
  mounted() {
    let th = this;
    let initSwiper = function() {
      th.routerSwiper = new Swiper("#router-list", {
        slidesPerView: "auto",
        resistanceRatio: 0,
        allowTouchMove: true,
        freeMode: true,
        freeModeMomentum: false,
        on: {
          tap: function(e) {
            // console.log(e);
            let target = e.target;
            let clickedIndex = this.clickedIndex;
            if (target.tagName == "I") {
              //删除
              th.OnClose(clickedIndex);
            } else {
              //跳转
              th.OnGoUrl(clickedIndex);
            }
          }
        }
      });
    };
    th.$utils.isObject("Swiper", function() {
      initSwiper();
    });
  },
  methods: {
    //点击跳转导航页面
    OnGoUrl(index) {
      let th = this;
      if (typeof index != "number") {
        return;
      }
      let data = th.navMenuList[index];
      th.$router.push({ path: data.url });
      th.$store.commit("Set_navRouterIndex", index);
    },
    //删除快捷导航
    OnClose(index) {
      let th = this;
      let data = th.navMenuList[index];
      //删除缓存
      th.$store.commit("Del_includeCom", data.sign);
      th.navMenuList.splice(index, 1);
      //判断是否需要跳转页面
      if (index == th.navRouterIndex) {
        //还要变化路由
        let beforedata = th.navMenuList[index - 1];
        th.$router.push({ path: beforedata.url });
        th.$store.commit("Set_navRouterIndex", index - 1);
      } else {
        if (index > th.navRouterIndex)
          th.$store.commit("Set_navRouterIndex", th.navRouterIndex);
        else th.$store.commit("Set_navRouterIndex", th.navRouterIndex - 1);
      }
    },
    //点击右
    OnMoveRight() {
      let th = this;
      th.routerSwiper.setTransition(1000); //设定过渡的时间
      let a = th.routerSwiper.getTranslate();
      let virtualSize = th.routerSwiper.virtualSize - th.routerSwiper.width;
      if (virtualSize <= 0) return;
      if (a - 200 <= -virtualSize) th.routerSwiper.setTranslate(-virtualSize);
      else th.routerSwiper.setTranslate(a + -200);
    },
    //点击左
    OnMoveLeft() {
      let th = this;
      let a = th.routerSwiper.getTranslate();
      th.routerSwiper.setTransition(1000); //设定过渡的时间
      if (a + 200 <= 0) th.routerSwiper.setTranslate(a + 200);
      else th.routerSwiper.setTranslate(0);
    },
    //关闭全部导航
    CloseAllNav() {
      let th = this;
      // th.$store.commit("Clear_navMenuList");
      th.navMenuList.splice(1, th.navMenuList.length - 1);
      th.$router.push({ path: th.navMenuList[0].url });
      th.$store.commit("Set_navRouterIndex", 0);
      //删除缓存
      th.$store.commit("Del_includeCom", null);
    },
    //快捷菜单滑到指定位置
    SlideTo() {
      let th = this;
      if (th.routerSwiper) {
        th.routerSwiper.update(true);
        th.routerSwiper.slideTo(th.navRouterIndex, 1000, false);
      }
    },
  },
  watch: {
    navRouterIndex(n, o) {
      let th = this;
      th.$nextTick(function() {
        th.SlideTo();
      });
    }
  }
};
</script>

